自己從頭到尾用 HTML 寫一個表格,或者從 0 開始使用 CSS 寫一個陰影效果,都是快把人逼死的過程啊,除非是真的打算刻苦一鍵一鍵敲程式碼,慢慢地練習,不然在上班時,趕專案時心特別累...今天就跟大家分享一些拿來偷吃步的好工具,多多利用它們,幫助自己準時下班囉。
查找 tailwindCSS class name 的神器,找到之後還有直連官網,超讚的啦。
製作順滑 box shadow 比想像中常用,設計稿上看到不會寫的影子,可以參考。
表格產生器,超好用。甚至可以直接從 word 或者 excel 複製表格貼上,連 css 都能產生呢。
這個是 div 版本的表格產生器,依照需求的情境不同,可以做不同的安排。
很多種類的 css 產生器。
我自己工作的其中一種流程是這樣 :設計稿是設計師給的,我拿到設計稿之後用純 HTML + CSS 完成之後,傳檔案給設計師做第一次的確認,確認完畢之後,當我要把切版檔案放進 react 時,就會需要它來幫我轉一下,曾經有試過 vs code 套件的轉換,用起來沒那麼順,還是習慣這個。
漸層的輔助製作工具,很漂亮也很好用,試試看吧!
有趣的可愛頭像產生器。
沒有設計師的時候,能幫自己產生參考的主色與輔色的顏色工具。
我不是很擅長設計,所以會跟這些網站借一點力量來用,最後還是要依靠自己的判斷來決定是不是要使用這些樣式,並不會完全照抄。